<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Ident Engine - Form Auto Fill Demo</title>

<link rel="stylesheet" href="css/site.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/demos.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/demo-form-autofill.css" type="text/css" media="all" />
<link rel="shortcut icon" href="images/logo16.png"/>	

<script language="javascript" type="text/javascript" src="ident/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="ident/ident-0.1.min.js"></script>
<script language="javascript" type="text/javascript" src="ident/ident-profile-0.1.min.js"></script>
<script language="javascript" type="text/javascript" src="ident/ident-ufxtract-parser-0.1.min.js"></script>
<script language="javascript" type="text/javascript" src="ident/ident-twitter-parser-0.1.min.js"></script>
<script language="javascript" type="text/javascript" src="ident/web-address.min.js"></script>

<link type="application/rss+xml" rel="alternate" title="Ident Engine (RSS)" href="http://identengine.com/Blog/syndication.axd?format=rss" />
<link type="application/atom+xml" rel="alternate" title="Ident Engine (ATOM)" href="http://identengine.com/Blog/syndication.axd?format=atom" />

<script language="javascript" type="text/javascript">


     /*
     *  Copyright 2009, Glenn Jones
     *  Licensed under the MIT license.
     *  http://identengine.com/license/
     *  More information: http://identengine.com/
     */
     
    
    // Page functions
    // -------------------------------------------------

    // Adds click event to form when page loads
    var doc = jQuery(document);
    
    doc.ready(function () {
    
    	document.getElementById("profile-form").reset();
    
        // Wire update notice to re-render content
        //doc.bind('ident:update', renderProfile);
        doc.bind('ident:update', statusUpdate);
        doc.bind('ident:error', displayError);	        
        
        webAddress.elt = "#webaddress";
        webAddress.startAnimate();
        
        jQuery("#photo-form-row").css("display","none");
        
        // Adds onclick event to form button
        jQuery("#subbutton").click(function () {
        	startDemo()            
        });
        
        // Add on enter keyup event
        jQuery("#urlinput").keyup(function(e) {
			if(e.keyCode == 13) {
				startDemo();
			}
		}); 

     });  
     

	function startDemo(){
 
 		resetProfiles(); 
 		webAddress.stopAnimate();
 		ident.reset();   
 		
 		jQuery('<h2 id="search-heading">Searching for your details</h2>').appendTo('#results');
    	jQuery('<div id="searching"><img class="spinner" src="images/ajax-loader.gif" /> Looking across the web to find your details...</div>').appendTo('#results');

        var url = jQuery("#urlinput").attr("value");
        ident.search(url);
	}
	
	
	
	
	function getProperty(obj, propertyString){
		var currentObj = obj;
		username = 'x';
		propertyString = propertyString.replace(/\[/g, ".");
		propertyString = propertyString.replace(/\]/g, "");
		propertyString = propertyString.replace(/'/g, "");

		var parts = propertyString.split('.');
	
		// if ther is only one property element
		if(propertyString.indexOf('.') < 0){
			if(propertyString.indexOf('[') != 0)
				if( obj[propertyString] )
					return obj[propertyString];

		}else{
			for (var x = 0; x < parts.length; x++) {
				if( parts[x] != ""){
					if( currentObj[parts[x]] ){
						currentObj = currentObj[parts[x]];
					}else{
						return '';
					}
				}
			}
			return currentObj;
		} 
		return '';
	}
	
    
    
     function renderProfile(e){
     
        resetProfiles();
        
         // Sort array of object in order by domain name
         ident.profiles.sort(ident.sortByDomain);

                      
        var hCard = ident.combinedProfile;
        
        jQuery('#nickname').attr('value', ident.topUsername());
        
		jQuery('#given-name').attr('value',getProperty(hCard , "n['given-name'][0]"));
		jQuery('#family-name').attr('value',getProperty(hCard , "n['family-name'][0]"));
		jQuery('#title').attr('value',getProperty(hCard , "title[0].value"));
		jQuery('#org').attr('value',getProperty(hCard , "org[0]['organization-name']"));
		jQuery('#note').text(getProperty(hCard , "note[0].value"));
		
		// Build different address line layouts - The order changes depentant on the number of address lines
		if(getProperty(hCard , "adr[0]['extended-address'][1]") != ''){
			jQuery('#street-address1').attr('value',getProperty(hCard , "adr[0]['extended-address'][0]"));
			jQuery('#street-address2').attr('value',getProperty(hCard , "adr[0]['extended-address'][1]"));
			jQuery('#street-address3').attr('value',getProperty(hCard , "adr[0]['street-address']"));
		}else if(getProperty(hCard , "adr[0]['extended-address'][0]") != '') {
			jQuery('#street-address1').attr('value',getProperty(hCard , "adr[0]['extended-address'][0]"));
			jQuery('#street-address2').attr('value',getProperty(hCard , "adr[0]['street-address']"));
		}else if(getProperty(hCard , "adr[0]['street-address']") != ''){
			jQuery('#street-address1').attr('value',getProperty(hCard , "adr[0]['street-address']"));
		}
		
		jQuery('#locality').attr('value',getProperty(hCard , "adr[0].locality"));
		jQuery('#region').attr('value',getProperty(hCard , "adr[0].region"));
		jQuery('#postal-code').attr('value',getProperty(hCard , "adr[0]['postal-code']"));
		jQuery('#country-name').attr('value',getProperty(hCard , "adr[0]['country-name']"));
		
		jQuery('#email').attr('value',getProperty(hCard , "email[0]['country-name']"));
		jQuery('#tel').attr('value',getProperty(hCard , "tel[0].value"));
		
		
		/*
		if(ident.topUsername() != "")
			jQuery('#username-source').text("Most commonly used");
			
		jQuery('#given-name-source').text(getProperty(hCard , "n.domain"));
		jQuery('#family-name-source').text(getProperty(hCard , "n.domain"));
		jQuery('#title-source').text(getProperty(hCard , "title[0].domain"));
		jQuery('#org-source').text(getProperty(hCard , "org[0].domain"));
		jQuery('#adr-source').text(getProperty(hCard , "adr[0].domain"));
        	
       
		jQuery('#email-source').text(getProperty(hCard , "email[0].domain"));  
		jQuery('#tel-source').text(getProperty(hCard , "tel[0].domain"));
		jQuery('#note-source').text(getProperty(hCard , "note[0].domain"));
		
		*/
		
		// Loop through all the profiles found
		var profileListStr = "The information used to auto fill this form was found on the following sites: ";
		for (var i = 0; i < ident.profiles.length; i++) {
			var hCard = ident.profiles[i];
             
            profileListStr += '<a target="_blank" href="' + hCard.sourceUrl + '">' + hCard.name + '</a>'
            
            if( i+2 < ident.profiles.length)
            	profileListStr += ", "
           	else
           		if(i+1 != ident.profiles.length)
           			profileListStr += " and " 	
            

		}
		
		jQuery("#source-information").html(profileListStr);
		
		
		// Loop through all the profiles found
		for (var i = 0; i < ident.profiles.length; i++) {
		
             var hCard = ident.profiles[i];
             
             
             if( hCard.photo || hCard.logo ){
             
               var foundPhoto = null;
             	
               // Find photo and create an img element 
               if(hCard.photo){      
                   if( hCard.photo.length){  
                       for (var x = 0; x < hCard.photo.length; x++) { 
	                       if( ident.isString(hCard.photo[x]) ){
	                       		foundPhoto = jQuery('<div class="found-photo"></div>');
	                       		foundPhoto.sourceUrl = hCard.sourceUrl;
	                           	jQuery('<img class="photo" title="Photo from ' + hCard.domain + '" width="48" height="48"  src="' + hCard.photo[x] +  '" />').appendTo(foundPhoto);
	                       }
                       }
                   }
               }
               
               // Find logo and create an img element - some site misuse this property for a photo  
               if(hCard.logo){
                   if(hCard.logo.length){
                       for (var x = 0; x < hCard.logo.length; x++) { 
	                       if( ident.isString(hCard.logo[x]) ){
	                       		foundPhoto = jQuery('<div class="found-photo"></div>');
	                       		foundPhoto.sourceUrl = hCard.sourceUrl;
	                           	jQuery('<img class="photo" title="Logo from ' + hCard.domain + '" width="48" height="48"  src="' + hCard.logo[x] +  '" />').appendTo(foundPhoto);
	                      }	
                       }
                   }
               }
               
               // If we have found a photo
                if(foundPhoto != null){
                	
                	// Append to page
                	jQuery(foundPhoto).appendTo('#found-photos'); 
		            
		            // Add the icon for the domain
		            jQuery('<img class="icon" title="Photo from ' + hCard.domain + '" src="ident/icons/' + hCard.name.replace(/\s/g, '').replace('.','').replace('-','')  +  '.png" />').appendTo(foundPhoto);                    
				
				
				   // Add rollover background colour change
                   jQuery(foundPhoto).hover(
                      function () {
                      	if(! jQuery(this).hasClass("selected"))
                        	jQuery(this).css({'background-color' : '#DB6A20'});
                      }, 
                      function () {
                      	if(! jQuery(this).hasClass("selected"))
                        	jQuery(this).css({'background-color' : 'transparent'});
                      }
                    );
                    
                    
                    
                     jQuery(foundPhoto).click(function () {

	                        // Add the url of the photo into the form input
	                        var src = jQuery(".photo", this).attr("src");
	                        jQuery("#photo-url").attr('value',src); 
	                        
	                        // Remove class and background colour from other photos
	                        jQuery(this).siblings().removeClass("selected");
	                        jQuery(this).siblings().css({'background-color' : 'transparent'});

	                        // Set the class and background colour
	                        jQuery(this).css({'background-color' : '#DB6A20'});
	                        jQuery(this).addClass("selected")
                             
		             });

				}
             	
             }
             
        }

		// Pick the first photo from group and class and background colour
		jQuery("#found-photos .found-photo:first").addClass("selected");
		jQuery("#found-photos .found-photo:first").css({'background-color' : '#DB6A20'});
		
		// Add the url of the photo into the form input
		var src = jQuery("#found-photos:first .photo").attr("src");
	    jQuery("#photo-url").attr('value',src); 


    }
     
     
     
    
    
    var alertTimerId;
     
     
    function statusUpdate(e, type){
    	if(ident.profiles.length > 0)
			jQuery('#search-heading').html("Searching - Found " + ident.profiles.length + " possible information sources...");

        clearTimeout (alertTimerId);
        alertTimerId = setTimeout ("delayedStatusUpdate()", 500);      
    }
    
    function delayedStatusUpdate(){
        if(ident.isSearching()){
           jQuery('#searching').html('<img class="spinner" src="images/ajax-loader.gif" /> Looking across the web to find your details...'); 
        }else{
           jQuery('#searching').css({'display' : 'none'});
           jQuery('#search-heading').css({'display' : 'none'});
           renderProfile();
        }  
    }
    
    function displayError(e, type){
        resetProfiles();
        jQuery('#searching').html('<h2 class="error">' + type + '</h2>');
        jQuery('#searching').css({'display' : 'block'});
        jQuery('#search-heading').css({'display' : 'none'});
     }


    // Clears the all contents
    function resetProfiles(){
    	jQuery("#profile-form input").attr('value', '');
    	jQuery("#profile-form .source-label").text('');
    	jQuery('#note').text('');
    	jQuery('#found-photos').html('');
    	jQuery('#results').html('');
    }
    




</script>

</head>

<body>
	<div class="header">
		<div class="centered">
			<a href="http://identengine.com/"><h1><span>Ident Engine</span></h1></a>
			<h2 id="strapline"><span>A JavaScript library that retrieves and aggregates profiles from across the web</span> </h2>
		</div>
	</div>

	<div class="content">
		<div class="centered">
		<div class="floatclear" style="clear:both">
			<ul class="menu">
				<li><a href="index.htm" class="firstItem">home</a></li>
				<li><a href="documentation/index.htm">documentation</a></li>
				<li><a href="opentables/index.htm">api</a></li>
				<li><a href="http://identengine.com/blog/">blog</a></li>
				<li><a href="about/index.htm" class="lastItem">about</a></li>
			</ul>
		</div>	
			
		<h1>Form Auto Fill Demo</h1>
		
		<noscript id="no-javascript-error"><h2 class="error">Sorry but you need to have JavaScript running to use this demo</h2></noscript>

		<p class="form-text">Please enter the web address of a profile page. This could be on Twitter, 
		FriendsFeed, Flickr, Digg or any other web profile page. Or try a gmail 
		email address</p>
		
		<div>
			<label for="urlinput">Web address </label>&nbsp;<input id="urlinput" name="url" value="http://friendfeed.com/glennjones" size=50 type="text" />&nbsp;
			<a id="subbutton" class="button">Find</a>
			<div id="webaddress"></div>
		</div>

		<div id="results"></div>
		<div class="floatclear" style="clear:both" id="profiles"></div>
		
		
		<form id="profile-form">
			
			<div class="info-group">	
				<p><label for="given-name">First name</label><input id="given-name" name="given-name" type="text" /><span id="given-name-source" class="source-label"></span></p>
				<p><label for="family-name">Surname</label><input id="family-name" name="family-name" type="text" /><span id="family-name-source" class="source-label"></span></p>
				<p><label for="nickname">Username</label><input id="nickname" name="nickname" type="text" /><span id="username-source" class="source-label"></span></p>
			</div>
			
			<div class="info-group">
				<p>Select a photo</p>
				<div id="found-photos" class="floatclear"></div>
				<p id="photo-form-row"><label for="photo">Photo Url</label><input id="photo-url" class="very-long-input" name="photo-url" type="text" /></p>
			</div>

			<div class="info-group">
				<p><label for="title">Job title</label><input id="title"  class="long-input" name="title" type="text" /><span id="title-source" class="source-label"></span></p>
				<p><label for="org">Company</label><input id="org" class="long-input" name="org" type="text" /><span id="org-source" class="source-label"></span></p>
			</div>
	
			<div class="info-group">
				<p><label for="street-address1">Address</label><input id="street-address1" class="long-input" name="street-address1" type="text" /><span id="adr-source" class="source-label"></span></p>
				<p><input id="street-address2" class="long-input" name="street-address2" type="text" /></p>
				<p><input id="street-address3" class="long-input" name="street-address3" type="text" /></p>
				
				<p><label for="locality">City/Town</label><input id="locality" class="long-input" name="locality" type="text" /></p>
				<p><label for="region">County</label><input id="region" class="long-input" name="region" type="text" /></p>
				<p><label for="country-name">Country</label><input id="country-name" class="long-input" name="country-name" type="text" /></p>
				<p><label for="postal-code">Postal code</label><input id="postal-code" name="postal-code" type="text" /></p>
			</div>
			
			<div class="info-group">
				<p><label for="email">Email</label><input id="email" class="long-input" name="email" type="text" /><span id="email-source" class="source-label"></span></p>
				<p><label for="tel">Tel</label><input id="tel" class="long-input" name="tel" type="text" /><span id="tel-source" class="source-label"></span></p>
			</div>
			
			
			
			<p><label for="note">About you</label><textarea id="note" name="note" cols="20" rows="4"></textarea><span id="note-source" class="source-label"></span></p>
		
			<a id="submit-button" class="button">Submit</a>
		
		</form>
		
		<div id="source-information"></div>

		</div>
	</div>
	

	

    <div class="footer">
		<div class="centered">
		
		<div class="copyright">© Copyright Glenn Jones 2009. All Rights Reserved.</div>
		
		</div>
	</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-3021774-6");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>
